<template>
  <div class="home-wrap">
    <el-row :gutter="20" type="flex" justify="space-between" style="margin-top: 23px">
      <el-col :span="16">
        <div class="content-common" style="width: 99%">
          <div class="search-top">
            <el-form :label-position="'top'" :inline="true" :model="formInline">
              <el-form-item label="月份">
                <el-date-picker v-model="formInline.month" type="month" placeholder="选择月"> </el-date-picker>
              </el-form-item>
              <el-form-item class="search-btn">
                <el-button
                  class="table-btn-blur"
                  @click="
                    page.currentPage = 1;
                    fetch();
                  "
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="tableData" border class="table-common" header-cell-class-name="table-header">
            <el-table-column type="index" width="55" label="序号"></el-table-column>
            <el-table-column align="center" prop="userName" label="人员姓名"></el-table-column>
            <el-table-column align="center" prop="stnm" label="测站"></el-table-column>
            <el-table-column align="center" prop="specificDate" label="日期"></el-table-column>
            <el-table-column align="center" prop="weekDay" label="星期"></el-table-column>
            <el-table-column align="center" prop="clockInTime" label="上班打卡时间"></el-table-column>
            <el-table-column align="center" prop="clockOffTime" label="下班打卡时间"></el-table-column>
            <el-table-column align="center" prop="coordinate" label="签到点位"></el-table-column>
            <el-table-column align="center" prop="status" label="状态"></el-table-column>
          </el-table>

          <el-row type="flex" justify="end" style="margin-top: 20px">
            <el-pagination background v-model:currentPage="page.currentPage" @current-change="fetch" layout="prev,total, pager, next" :total="page.totalSize"> </el-pagination>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="content-common">
          <div>
            <el-calendar v-model="calenderDate" :range="dateRange">
              <template #date-cell="{ data }">
                <div
                  v-for="(item, key) in activeday"
                  :key="key"
                  :class="data.day == item.date ? 'isClockIn' : ''"
                  style="width: 144%; height: 124%; padding-top: 15px; margin-left: -8px; margin-top: -8px; box-sizing: border-box"
                >
                  <div :class="data.day == item.date ? 'isClockInDate' : 'spandate'">{{ data.day.split('-').slice(2).join('-') }}</div>
                  <div>
                    <div v-if="data.day == item.date" style="margin-top: 10px; margin-left: 5px; color: #fff; font-weight: bold">已打卡</div>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getAttendanceCalendar } from '../../../api/index';
export default {
  components: {},
  props: {
    query: {
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      calenderDate: new Date(),
      formInline: {
        month: ''
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      activeday: [],
      dateRange: []
    };
  },
  created() {
    let date = new Date();
    this.formInline.month = new Date();
    this.formInline.month = this.formatDate(this.formInline.month);
    let startTime = this.formInline.month + '-01';
    let lastDay = this.getLastDay(date);
    let endTime = this.formInline.month + '-' + lastDay;
    this.dateRange = [startTime, endTime];
    this.fetch(this.query);
  },
  methods: {
    getLastDay(date) {
      var today = new Date(date);
      var year = today.getFullYear();
      var month = today.getMonth();
      var lastDay = new Date(year, month + 1, 0).getDate();
      return lastDay;
    },
    formatDate(date) {
      const value = new Date(date);
      const year = value.getFullYear();
      const month = (value.getMonth() + 1).toString().padStart(2, '0');
      return `${year}-${month}`;
    },
    fetch(row) {
      let that = this;
      this.formInline.month = this.formatDate(this.formInline.month);
      let startTime = this.formInline.month + '-01';
      var lastDay = this.getLastDay(startTime);
      let endTime = this.formInline.month + '-' + lastDay;
      this.dateRange = [startTime, endTime];
      //判断选中月份月份是否为当前月份
      let date = new Date();
      let currentMonth = this.formatDate(date);
      if (currentMonth == this.formInline.month) {
        this.calenderDate = new Date();
      } else {
        this.calenderDate = new Date(startTime);
      }
      let data = {
        currentPage: this.page.currentPage,
        pageSize: 10,
        userCode: this.query.userCode,
        yearMonth: this.formInline.month || ''
      };
      getAttendanceCalendar(data).then((res) => {
        this.tableData = res.object;
        let arr = [];
        for (let i = 0; i < that.tableData.length; i++) {
          if (that.tableData[i].specificDate == null || that.tableData[i].specificDate == '') {
            that.tableData[i].specificDate = this.query.specificDate;
            that.tableData[i].status = '未签到';
          } else {
            let obj = {
              date: that.tableData[i].specificDate
            };
            arr.push(obj);
          }
          if (that.tableData[i].userName == null || that.tableData[i].userName == '') {
            that.tableData[i].userName = this.query.userName;
          }
        }
        that.activeday = arr;
        this.page.totalSize = res.object.length;
        this.$forceUpdate();
      });
    },
    handerClose() {
      this.$emit('close');
    }
  }
};
</script>

<style lang="less" scoped>
.dialog_filter_row {
  display: flex;
  justify-content: space-between;
}

.dialog_filter_row .el-form-item {
  display: flex;
  flex-direction: column;
  width: 188px;
}

.dialog_filter_row .el-select,
.dialog_filter_row .el-date-editor,
.dialog_filter_row .el-input-group {
  width: unset !important;
}

.form_item_col {
  width: 188px;
}
::v-deep .el-form-item__label {
  margin: 20px 0 10px;
  height: 14px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00041a;
  line-height: 14px;
  text-indent: 14px;

  &:before {
    display: none;
  }
}

.date_picker {
  width: 188px;
}

.home-wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
.content-common {
  bottom: 28px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.search-btn {
  margin-top: 51px;
  width: auto !important;
}
.isClockIn {
  background-color: #e15832;
}
.isClockInDate {
  color: #fff;
  font-weight: bold;
}
</style>